<template>
  <div style="display: flex">
    <div class="nav-container">
      <div class="title">camunda工作流</div>

      <el-menu :collapse="false" background-color="#3d3d3d" text-color="#fff" active-text-color="#ffd04b"
               router :default-active="data.curMenu" :unique-opened="true">
        <el-menu-item class="single-item" index="/definitionList">
          <template #title>流程定义列表</template>
        </el-menu-item>
        <el-menu-item class="single-item" index="/instanceList">
          <template #title>流程实例列表</template>
        </el-menu-item>
        <el-menu-item class="single-item" index="/taskList">
          <template #title>任务列表</template>
        </el-menu-item>
        <el-menu-item class="single-item" index="/definition">
          <template #title>流程定义</template>
        </el-menu-item>
      </el-menu>
    </div>

    <el-card class="content-card">
      <router-view/>
    </el-card>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router/dist/vue-router";
import {onBeforeMount, reactive, watch} from "vue";

const myRouter = useRouter();
const data = reactive({
  curMenu: ""
})

watch(() => myRouter.currentRoute.value.path, () => {
  data.curMenu = myRouter.currentRoute.value.path;
})

onBeforeMount(() => {
  data.curMenu = myRouter.currentRoute.value.path;
});
</script>

<style scoped>
/* 导航容器样式 */
.nav-container {
  width: 240px;
  height: 100vh;
  min-height: 600px;
  background-color: #ffffff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
}

.nav-container::-webkit-scrollbar {
  width: 6px;
}

.nav-container::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

.nav-container::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0;
}

.title {
  width: 240px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  color: #409eff;
  font-weight: 600;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

/* 菜单整体样式 */
.el-menu {
  border-right: none;
  background-color: transparent;
}

/* 单个菜单项样式 */
.single-item {
  padding-left: 30px !important;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
  color: #333;
}

/* 悬停效果 */
.single-item:hover {
  background-color: #ecf5ff;
  color: #409eff !important;
}

/* 选中状态 */
.single-item.is-active {
  background-color: #ecf5ff !important;
  color: #409eff !important;
  border-right: 2px solid #409eff;
  font-weight: 600;
}

.content-card {
  height: 100vh;
  width: calc(100vw - 240px);
  min-height: 600px;
  min-width: 1000px;
  overflow: auto;
  flex: 1;
  border: none;
  background-color: #f5f7fa;
}

.content-card::-webkit-scrollbar {
  width: 6px;
}

.content-card::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}
</style>